import {Avatar, Button, Card, message} from 'antd';
import React, {useEffect, useState} from 'react';
import {AntDesignOutlined} from "@ant-design/icons";
import {currentUserUsingGET, getPublicKey, getSecretKeyUsingPost} from "@/services/lapi-backend/userAdmin";
import {JSEncrypt} from "jsencrypt";
import CryptoJS from 'crypto-js';

const {Meta} = Card;

const App: React.FC = () => {
  const defaltUser: API.User = {
    nickname: "我是People",
    accessKey: "123456789"
  }
  let key: string = '';
  let iv: string = ''
  const [secretKey, setSecretKey] = useState('');
  const [user, setUser] = useState<API.User>(defaltUser);
  useEffect(() => {
    currentUserUsingGET({}).then(r => {
      if (r.code === 0) {
        setUser(r.data == undefined ? {} : r.data)
      } else {
        message.error(r.message);
      }
    })
  }, [])

  const generateKeyAndIV = (): API.SecretKeyRequest => {
    key = CryptoJS.lib.WordArray.random(16).toString();
    iv = CryptoJS.lib.WordArray.random(16).toString();

    const res: API.SecretKeyRequest = {key, iv}
    return res
  }
  // // 加密
  // const encrypt = (data: string) => {
  //   const ciphertext = CryptoJS.AES.encrypt(data, CryptoJS.enc.Hex.parse(key), {iv: CryptoJS.enc.Hex.parse(iv)});
  // }

  // 解密
  const decrypt = (data: string): string => {
    const bytes = CryptoJS.AES.decrypt(data, CryptoJS.enc.Hex.parse(key), {iv: CryptoJS.enc.Hex.parse(iv)});
    const plaintext = bytes.toString(CryptoJS.enc.Utf8);
    return plaintext
  }
  const rsaEncrypt = (publicKey: string, data: string): string => {
    const rsa = new JSEncrypt();
    rsa.setPublicKey(publicKey);
    return rsa.encrypt(data) as string;
  }
  const getSecretKey = () => {
    getPublicKey().then(r => {
      if (r.code == 0) {
        const publicKey: string = r.data as string;
        const secretKeyRequest: API.SecretKeyRequest = generateKeyAndIV();
        console.log(secretKeyRequest)
        const encryptData = rsaEncrypt(publicKey, JSON.stringify(secretKeyRequest))
        getSecretKeyUsingPost(encryptData, {}).then(res => {
          if (res.code == 0) {
            const resEncryptData: string = res.data as string;
            const s = decrypt(resEncryptData);
            setSecretKey(s);
            message.success("请妥善保管 secretKey ，不要泄露", 3)
          } else {
            message.error(res.message);
          }
        })
      } else {
        message.error(r.message)
      }
    })
  }

  // 生成16进制秘钥和IV
  return (
    <Card

      style={{width: 460}}
    >
      <Meta style={{textAlign: "center"}} description={
        <Avatar
          src={"https://gw.alipayobjects.com/zos/antfincdn/XAosXuNZyF/BiazfanxmamNRoxxVxka.png"}
          size={100}
          icon={<AntDesignOutlined/>}
        />
      }/>
      <Meta style={{
        textAlign: "center",
        marginTop: 20,
        marginBottom: 30,
        fontSize: "20 !important",
        fontFamily: "-apple-system,BlinkMacSystemFont,segoe ui,Roboto,helvetica neue,Arial,noto sans,sans-serif,apple color emoji,segoe ui emoji,segoe ui symbol,noto color emoji"
      }}
            title={user.nickname == undefined ? "Serati Ma" : user.nickname}/>
      <Meta style={{
        marginLeft: 20,
        marginBottom: 10
      }} title={<>
        账号: {user.account}
      </>}/>
      <Meta style={{
        marginLeft: 20,
        marginBottom: 10
      }} title={<>
        accessKey: {user.accessKey}
      </>}/>
      <Meta style={{
        marginLeft: 20,
        marginBottom: 10
      }} title={<>
        secretKey : {
        secretKey == '' ?
          <Button type={"primary"} onClick={() => {
            getSecretKey();
          }
          }>点击获取</Button> : secretKey}
      </>}/>
      <Meta style={{
        marginLeft: 20,
        marginBottom: 10
      }} title={<>
        {<a href={"https://pan.baidu.com/s/18qSY8UkMh_asyfy9GcB5qQ?pwd=1234"} target={"_blank"}>SDK下载</a>}
      </>}/>
    </Card>
  );
}

export default App;
